{% extends "base_lang.html" %}

{% block title %}About - Sprunki Phase 3{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('About Sprunki Phase 3') }}</h1>
            <p class="text-xl text-white mb-8">{{ _('Discover the Story Behind the Music') }}</p>
        </div>
    </div>
</section>

<!-- About Content Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12">
            <!-- Main Content -->
            <div class="space-y-8">
                <div>
                    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Our Story') }}</h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">
                        {{ _('Born from a passion for music and gaming, Sprunki Phase 3 represents the evolution of interactive music creation. Our journey began with a simple idea: make music creation accessible and fun for everyone.') }}
                    </p>
                </div>
                
                <div>
                    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Our Mission') }}</h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">
                        {{ _('To make music creation accessible and fun for everyone, regardless of their musical background. We believe that everyone has the potential to create amazing music.') }}
                    </p>
                </div>
            </div>

            <!-- Stats & Info -->
            <div class="space-y-8">
                <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-lg shadow-lg">
                    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Quick Facts') }}</h2>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <div class="text-primary text-3xl font-bold mb-2">1M+</div>
                            <p class="text-gray-600 dark:text-gray-300">{{ _('Active Users') }}</p>
                        </div>
                        <div>
                            <div class="text-primary text-3xl font-bold mb-2">50+</div>
                            <p class="text-gray-600 dark:text-gray-300">{{ _('Sound Effects') }}</p>
                        </div>
                        <div>
                            <div class="text-primary text-3xl font-bold mb-2">10+</div>
                            <p class="text-gray-600 dark:text-gray-300">{{ _('Game Modes') }}</p>
                        </div>
                        <div>
                            <div class="text-primary text-3xl font-bold mb-2">24/7</div>
                            <p class="text-gray-600 dark:text-gray-300">{{ _('Support') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Team Section -->
                <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-lg shadow-lg">
                    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Our Team') }}</h2>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-4">
                            <div class="text-primary mt-1">
                                <i class="fas fa-users text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ _('Passionate Creators') }}</h3>
                                <p class="text-gray-600 dark:text-gray-300">{{ _('A team of musicians, developers, and artists working together.') }}</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-4">
                            <div class="text-primary mt-1">
                                <i class="fas fa-globe text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ _('Global Community') }}</h3>
                                <p class="text-gray-600 dark:text-gray-300">{{ _('Players from over 100 countries creating music together.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 